<template>
	<view class="container">
		<carHeader :title="'汽车保养'"></carHeader>
		<view class="baoyang">
			<view class="box1">
				<view class="box1-1">
					<image :src="faceImg" mode="widthFix"></image>
				</view>
				<view class="box1-2">
					<view class="box1-2-1">
						<p>{{name}}</p>
						<image v-for="n in star" :key="n" class="startimg"
							src="../../static/车联网服务-04汽车保养_slices/五星 拷贝.png" mode=""></image>
						<!-- 			<image class="startimg" src="../../static/车联网服务-04汽车保养_slices/五星 拷贝.png" mode=""></image>
						<image class="startimg" src="../../static/车联网服务-04汽车保养_slices/五星 拷贝.png" mode=""></image>
						<image class="startimg" src="../../static/车联网服务-04汽车保养_slices/五星 拷贝.png" mode=""></image> -->
						<text>{{star}}分&nbsp;&nbsp;&nbsp; 销量：{{xiaoliang}}</text>
					</view>
					<view class="box1-2-2" @click="goTodaohang">
						<text>营业时间：{{yingyeTime}}</text><br />
						<text>位置：{{address}}</text>
						<image src="../../static/车联网服务-05就近加油_slices/plane@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box2">
				<text class="fwtitle">服务项目</text>
				<view v-for="(item, index) in checkboxList" :key="item.serviceId" class="fwall">
					<view class="taocan">
						<view class="box2-1">
							<u-checkbox v-model="item.isChecked" @change="handleCheckChange(item)" :shape="'circle'"
								:size="'20rpx'">
							</u-checkbox>
							<span :style="{ color: item.isChecked ? '#2979FF' : 'black' }">{{ item.name }}</span>
						</view>
						<view class="box2-2">
							<text class="tx1">￥{{item.oldPrice}}</text>
							<text class="tx2">￥{{item.newPrice}}</text>
						</view>
					</view>
					<view class="xiaoqing">
						<text>{{item.intro}}</text>
					</view>
				</view>
			</view>
			<view class="box3">
				<text>服务评价</text>
				<view v-for="(review, index) in reviews" :key="index" class="review-item">
					<view class="img">
						<image :src="review.user.uImg" mode=""></image>
					</view>
					<view class="review-header">
						<span class="user-name">{{review.user.uName}}</span>
						<span class="date">{{ review.evTime }}</span>
					</view>
					<view class="stars">
						<span v-for="n in review.evRate" :key="n" class="star">★</span>
					</view>
					<view class="review-content">
						{{ review.evContent }}
					</view>
				</view>
			</view>
			<view class="bottom">
				<u-popup :show="show" @close="close" @open="open" :round="10" :closeable='true'>
					<view class="dingdan">
						服务订单
					</view>
					<view v-for="(item, index) in list" :key="index" class="fwall1">
						<view class="taocan">
							<view class="box2-1">
								<u-checkbox v-model="item.disabled" @change="gouwuche(item)" :shape="'circle'"
									:size="'36rpx'">
								</u-checkbox>
								<span :style="{ color: item.disabled ? '#2979FF' : 'black' }">{{ item.name }}</span>
							</view>
							<view class="box2-2">
								<text>￥{{item.oldPrice}}</text>
							</view>
						</view>
					</view>
					<view class="bottom2">
						<view @click="show = true" class="gwcbutton1">合计：￥{{allmoney}}</view>
						<view @click="gouwuchezhifu" class="gwcbutton2">确认已选服务</view>
					</view>
				</u-popup>
				<view class="bottom2">
					<view @click="show = true" class="gwcbutton1">购物车（ {{length}} ）</view>
					<view @click="goTodingdanzhifu" class="gwcbutton2">确认已选服务</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '大美汽车保养厂（解放路点）',
				star: 1,
				address: '山阳区人民路与解放路交叉口',
				yingyeTime: '无数据',
				faceImg: '../../static/车联网服务-03车辆维修-03门店详情_slices/泰山汽车服务站.png',
				xiaoliang: 999,
				checkboxValue1: [],
				// 基本案列数据
				list: [],
				list1: [],
				show: false,
				checkboxList: [],
				reviews: [],
				length: 0,
				length1: 0,
				allmoney: 0,
				allmoney1: 0,
			}
		},
		onLoad(options) {
			console.log(options.shopId)
			this.onlonddata(options.shopId)
			// this.fuwuxiangmu(options.shopId)
			this.fuwuxiangmu(5)
			this.pingjia(5)
			// this.pingjia(options.shopId)
		},
		methods: {
			onlonddata(id) {
				uni.request({
					url: 'http://localhost:8080/user/selectShopById/' + id, // 改为你的实际接口地址  
					method: 'POST', // 或者 'POST'  
					success: (res) => {
						// 请求成功，res为服务器返回的数据  
						console.log(res.data.faceImg)
						if (res.statusCode === 200) {
							this.name = res.data.shopName
							this.star = res.data.star
							this.address = res.data.area + ' ' + res.data.address
							this.yingyeTime = res.data.yingyeTime + ' ' + res.data.jutiTime
							this.faceImg = res.data.faceImg
							this.xiaoliang = res.data.xiaoliang
						} else {
							// 请求失败或服务器返回错误状态码  
							console.error('请求失败', res);
						}
					},
					fail: (err) => {
						// 请求失败  
						console.error('请求失败', err);
					}
				});
			},
			fuwuxiangmu(id) {
				if (id != null & id > 0) {
					uni.request({
						url: 'http://localhost:8080/user/fuwunames/' + id, // 改为你的实际接口地址  
						method: 'POST', // 或者 'POST'  
						success: (res) => {
							this.checkboxList = res.data
						},
						fail: (err) => {
							uni.showToast({
								title: '请求服务器失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				} else {
					uni.showToast({
						title: '商户不存在',
						icon: 'none',
						duration: 2000
					});
				}

			},
			pingjia(id) {
				if (id != null & id > 0) {
					uni.request({
						url: 'http://localhost:8080/user/pingjia/' + id, // 改为你的实际接口地址  
						method: 'POST', // 或者 'POST'  
						success: (res) => {
							this.reviews = res.data
						},
						fail: (err) => {
							uni.showToast({
								title: '请求服务器失败',
								icon: 'none',
								duration: 2000
							});
						}
					});
				} else {
					uni.showToast({
						title: '商户不存在',
						icon: 'none',
						duration: 2000
					});
				}

			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			handleCheckChange(item) {
				const index = this.list.findIndex(itemlist => itemlist.serviceId === item.serviceId);
				if (index !== -1) {
					// 如果已存在，则移除它  
					this.allmoney1 = (this.allmoney1 * 100 - item.oldPrice * 100) / 100;
					this.list.splice(index, 1);
				} else {
					// 如果不存在，则添加它  
					this.list.push(item);
					this.allmoney1 = (this.allmoney1 * 100 + item.oldPrice * 100) / 100;
				}
				this.length = this.list.length
				this.dingdanid = item.serviceId
			},
			gouwuche(item) {
				const index = this.list1.findIndex(itemlist => itemlist.serviceId === item.serviceId);
				if (index !== -1) {
					// 如果已存在，则移除它  
					this.allmoney = (this.allmoney * 100 - item.oldPrice * 100) / 100;
					this.list1.splice(index, 1);
				} else {
					// 如果不存在，则添加它  
					this.list1.push(item);
					this.allmoney = (this.allmoney * 100 + item.oldPrice * 100) / 100;
				}
				console.log(this.allmoney)
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			goTodaohang() {
				uni.navigateTo({
					url: '/pages/baoyangdaohang/baoyangdaohang'
				})
			},
			goTodingdanzhifu() {
				let listStr = JSON.stringify(this.list);  
				uni.navigateTo({
					url: `/pages/qcby-orders/qcby-orders?list=${encodeURIComponent(listStr)}`
				})
			},
			gouwuchezhifu() {
				let listStr = JSON.stringify(this.list1);
				uni.navigateTo({
					url: `/pages/qcby-orders/qcby-orders?list=${encodeURIComponent(listStr)}`
				})
			}
		}


	}
</script>

<style lang="scss">
	.fwall1 {
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.xuanzhe {
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.dingdan {
		margin: 20rpx;
	}

	.gwcbutton1 {
		background-image: url("../../static/车联网服务-04汽车保养-03门店详情_slices/矩形 10 拷贝@2x.png");
		background-size: 300rpx;
		width: 300rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		color: white;
	}

	.gwcbutton2 {
		background-image: url("../../static/车联网服务-04汽车保养-03门店详情_slices/矩形 10 拷贝 2@2x.png");
		background-size: 300rpx;
		width: 300rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		color: white;
	}

	.bottom2 {
		height: 150rpx;
		background-color: white;
		align-items: center;
		display: flex;
		justify-content: space-around;
	}

	.bottom {
		width: 94%;
		height: 150rpx;
		position: fixed;
		bottom: 0;

	}

	.fwtitle {
		margin: 40rpx;
		font-weight: 600;
	}

	.taocan {
		font-size: 28rpx;
		margin: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.xiaoqing {
		font-size: 28rpx;
		margin: 20rpx 40rpx;
		padding-bottom: 20rpx;

	}

	.xiaoqing:nth-child(2) {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.tx1 {
		font-size: 32rpx;
		color: red;
		margin-right: 20rpx;
	}

	.tx2 {
		color: #999;
		text-decoration: line-through;
	}

	.box2-1 {
		display: flex;
	}

	.box2-2 {
		float: right;
	}

	// .custom-text {  
	//   /* 基本的文字样式 */  
	// }  
	// .text-color-changed {  
	//   color: red; /* 当复选框选中时改变文字颜色 */  
	// }  
	.slot {
		padding-top: 40rpx;
	}

	.baoyang {
		width: 94%;
		height: 500rpx;
		margin-left: 3%;
		background-color: skyblue;
		border-radius: 30rpx 30rpx 0 0;
		position: absolute;
		top: 150rpx;
	}

	.box1,
	.box2 {
		width: 100%;
		margin: auto;
		padding-top: 6%;
		padding-bottom: 6%;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 40rpx;

	}

	.box1-1 {
		width: 88%;
		margin: auto;

		image {
			width: 100%;
			border-radius: 30rpx;
		}
	}

	.box1-2 {
		margin-left: 6%;
		margin-top: 30rpx;

		.box1-2-1 p {
			font-weight: 600;
		}

		.box1-2-1 text {
			margin-left: 30rpx;
		}

		.box1-2-2 image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 30rpx;
		}

		text {
			font-size: 26rpx;
		}
	}

	.startimg {
		width: 25rpx;
		height: 25rpx;
	}

	.box3 {
		width: 100%;
		margin: 30rpx auto;
		padding-top: 6%;
		padding-bottom: 6%;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		background-color: white;

		text {
			font-weight: 600;
			margin-left: 40rpx;
			margin-bottom: 40rpx;
		}

		.review-header {
			float: right;
		}

	}

	.review-item {
		margin-bottom: 20px;

		.img {
			float: left;
			width: 180rpx;
			height: 200rpx;
			display: flex;
			justify-content: center;

			image {
				width: 120rpx;
				height: 120rpx;
				max-width: 90%;
				/* 使图片宽度不超过容器宽度 */
				border-radius: 50%;
			}

		}
	}

	.review-header {
		width: 70%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-name {
		font-weight: 600;
	}

	.date {
		font-size: 14px;
		color: #666;
	}

	.stars {
		display: inline-block;
	}

	.star {
		color: gold;
	}

	.review-content {
		margin-top: 5px;
		font-size: 28rpx;
		color: #333;
	}
</style>